import React, { Component } from 'react'
import {
  View, TextInput, StyleSheet, Text, Image, SafeAreaView, Navigator, TouchableOpacity
} from 'react-native'
import NavBar from '../../../../../components/PublicHeader';
import { Images } from '../../../../../public/images/images'
import { Constant } from '../../../../../public/js/constant';
import fetchWebApi from '../../../../../public/WebApi/fetchBase';
import { POST_RESETPASSWORD } from '../../../../../public/WebApi/myInfoDataInterface/userInfoListApi';
import getStorageValue from '../../../../../utils/getStorageValue';
import Layer from '../../../../../utils/Layer';
export default class loginPassword extends Component {
  constructor(props) {
    super(props)
    this.state = {
      OidPassword: "",
      OidPasswords: false,
      password: '',
      passwords: false,
      NewPassword: '',
      NewPasswords: false
    }
  }

  componentDidMount = () => {
    //console.log(parseInt(this.state.searchTexts))
    // if (password === parseInt(this.state.searchTexts)) {
    //   alert('登入成功')
    // }

  }
  componentDidUpdate = () => {

  }

  OidPassword(text) {
    let reg = /^[a-zA-Z0-9]{6,8}$/;
    if (reg.test(text)) {
      this.setState({
        OidPassword: text,
        OidPasswords: false
      })
    } else {
      if (text.lenth >= 6) {
        this.setState({
          OidPasswords: true
        })
      }

    }
  };
  password(text) {
    let reg = /^[a-zA-Z0-9]{6,8}$/;
    if (reg.test(text)) {
      this.setState({
        password: text,
        passwords: false
      })
    } else {
      if (text.lenth >= 6) {
        this.setState({
          passwords: true
        })
      }
    }
  };
  NewPassword(text) {
    if (this.state.password == text) {
      this.setState({
        NewPassword: text,
        NewPasswords: false
      })
    } else {
      if (text.lenth >= 6) {
        this.setState({
          NewPasswords: true
        })
      }
    }
  };
  onClick() {

  }

  // 该密码
  async resetpassword() {
    console.log(this.state.OidPassword, this.state.password, this.state.NewPassword);
    if (this.state.NewPassword != '' && this.state.OidPassword != '' && this.state.password != '') {
      if (this.state.password === this.state.NewPassword) {
        const res = await fetchWebApi(POST_RESETPASSWORD,
          { token: await getStorageValue(Constant.TOKEN), password: this.state.OidPassword, newPassword: this.state.password }, 'POST');
        // console.log(res);
        if (res.status == 200) {
          if (res.data == 1) {
            Layer.showMsg("密码更改成功");
            this.props.navigation.push('Accountlogin')
          } else {
            Layer.showMsg("旧密码输入错误");
          }

        } else if (res.status === 401) {
          console.log(res.status);
          await AsyncStorage.removeItem(Constant.TOKEN);
          // 弹窗提示

        } else {
          Layer.showMsg("获取用户信息列表失败");
        }
      }
    } else {
      Layer.showMsg('请输入正确的密码')
    }
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <NavBar
          navigation={this.props.navigation}
          title={""}
        />
        <View style={styles.containers} >
          <Text style={styles.Contenttext}>设置新密码</Text>
        </View>
        <View style={styles.tail_conton}>
          <View style={styles.middlets}>
            <Text style={styles.mima}>旧密码</Text>
            <TextInput
              style={styles.inputSearch}
              // inlineImageLeft="sou"
              // inlineImagePadding={40}
              onChangeText={text => this.OidPassword(text)}
              placeholder={"请输入旧密码"}

            >{this.state.OidPassword}</TextInput>
          </View>

          <View style={styles.tips}>
            <Text style={{ color: 'red' }}>{this.state.OidPasswords ? '请输入正确的密码' : null}</Text>
          </View>
          <View style={styles.middlets}>
            <Text style={styles.mima}>新密码</Text>
            <TextInput
              secureTextEntry={true}
              style={styles.inputSearch}
              onChangeText={text => this.password(text)}
              placeholder={"请输入新密码"}
            >{this.state.password}</TextInput>
          </View>

          <View style={styles.tips}>
            <Text style={{ color: 'red' }}>{this.state.passwords ? '新密码格式有误' : null}</Text>
          </View>
          <View style={styles.middlets}>
            <Text style={styles.mima}>确认密码</Text>
            <TextInput
              secureTextEntry={true}
              style={styles.inputSearch}
              onChangeText={text => this.NewPassword(text)}
              placeholder={"请再次输入新密码"}
            >{this.state.NewPassword}</TextInput>
          </View>

          <View style={styles.tips}>
            <Text style={{ color: 'red' }}>{this.state.NewPasswords ? '两次密码不一致' : null}</Text>
          </View>

          <View style={{ width: '89%', marginTop: 10, marginLeft: "8%" }} >
            <Text style={{ color: '#999999', fontSize: 13, }}>密码是由6-8位数字、字母符号组成</Text>
          </View>
        </View>
        <TouchableOpacity>
          <View style={styles.tail}>
            <Text style={styles.Login} onPress={() => { this.resetpassword() }}>确定</Text>
          </View>
        </TouchableOpacity>
      </SafeAreaView >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    backgroundColor: 'white',
  },
  layer: {
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: 120

  },
  Textred: {
    color: 'white'
  },
  inputSearch: {
    height: 40,
    width: "70%",
    borderRadius: 18,
    fontSize: 17,
    fontWeight: '500',
    color: 'rgba(0, 0, 0, 0.31)',
    paddingLeft: 20
    // TextIndent: 20
  },
  containers: {
    marginTop: '20%',
    alignItems: 'center',
    marginBottom: 30,
  },
  move: {
    marginLeft: '8%'
  },
  Contenttext: {
    fontSize: 20,
    color: '#333333',
    fontWeight: '700',
  },
  Contenttexts: {
    fontSize: 13,
    color: 'rgba(0, 0, 0, 0.56)',
    marginLeft: 45,
    marginTop: 5,
    fontWeight: 'bold'
  },
  VerificationCode: {
    marginTop: 20,
    color: '#4C6BDC',
    height: 50,
    textAlign: 'center',
    lineHeight: 50,
    position: 'absolute',
    right: 60,
    borderBottomRightRadius: 10,
    borderTopRightRadius: 10,
    fontSize: 15
  },
  colors: {
    color: '#4C6BDC'
  },
  Login: {
    width: '85%',
    backgroundColor: '#1890FF',
    height: 50,
    borderRadius: 20,
    textAlign: 'center',
    lineHeight: 50,
    fontSize: 20,
    color: '#FFFFFF'
  },
  middle: {
    flexDirection: 'row',
    marginTop: 20,
    marginLeft: '10%'
  },
  tail: {
    display: 'flex',
    width: '100%',
    marginTop: 30,
    alignItems: 'center',
  },
  tails: {
    display: 'flex',
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: "80%",
    marginLeft: '10%'
  },
  Tailcolor: {
    color: 'rgba(0, 0, 0, 0.5)'
  },
  mima: {
    height: 40,
    width: "30%",
    lineHeight: 40,
    fontSize: 15,
    color: '#333333'
  },
  tips: {
    color: 'red'
  },
  tail_conton: {
    justifyContent: 'center', alignItems: "center"
  },
  // middles: {
  //   flexDirection: 'row',
  //   justifyContent: 'center',
  //   marginTop: 40,
  //   borderBottomColor: '#f5f5f5',
  //   borderBottomWidth: 1,
  //   width: '80%',
  //   paddingBottom: 10,
  //   justifyContent: 'space-between'
  // },
  middlets: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
    borderBottomColor: '#f5f5f5',
    borderBottomWidth: 1,
    width: '80%',
    paddingBottom: 10,
    justifyContent: 'space-between'
  }

})